<template>
  <div>
    <!-- 导航栏 -->
    <nav class="navbar">
      <div class="nav-left">
        <!-- 首页按钮 -->
        <span class="nav-item" @click="goToHome">首页</span>
        <!-- 教学课堂按钮，悬停出现下拉菜单 -->
        <el-dropdown trigger="hover">
          <span class="nav-item">教学课堂</span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="goToTeachingClassrooms">教学课堂</el-dropdown-item>
              <el-dropdown-item @click="goToExamLibrary">试卷库</el-dropdown-item>
              <el-dropdown-item @click="goToQuestionBank">试题库</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>

      <div class="nav-right">
        <!-- 搜索图标 -->
        <el-icon class="search-icon"><Search /></el-icon>

        <!-- 新增按钮 -->
        <el-dropdown @command="handleCommand">
          <div>
            <el-icon alt="新增" class="add-icon"><CirclePlusFilled /></el-icon>
          </div>
          <button class="add-button" type="button"></button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="classroom">新建教学课堂</el-dropdown-item>
              <el-dropdown-item command="joinclassroom">加入教学课堂</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>

        <!-- 登录注册按钮或头像 -->
        <div v-if="isLoggedIn">
          <el-dropdown @command="handleCommand">
            <span class="user-avatar">
              <img :src="userAvatar" alt="头像" class="avatar-img" />
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="resource">资源库</el-dropdown-item>
                <el-dropdown-item command="goToaccount">账号管理</el-dropdown-item>
                <el-dropdown-item command="goToPersonalCenter">个人中心</el-dropdown-item>
                <el-dropdown-item command="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <div v-else>
          <el-button type="primary" @click="showLoginModal = true">登录/注册</el-button>
        </div>
      </div>
    </nav>

    <!-- 登录弹窗 -->
    <LoginModal :visible="showLoginModal" @update:visible="showLoginModal = $event" @login-success="handleLoginSuccess" />
  </div>
</template>

<script>
import LoginModal from "@/components/LoginModal.vue";
import axios from "axios";
import avatar from "@/assets/头像.jpg";

export default {
  components: {
    LoginModal,
  },
  data() {
    return {
      showLoginModal: false,
      isLoggedIn: false,
      userAvatar: avatar,
      userId: null,
    };
  },
  methods: {
    async fetchUserAvatar() {
      try {
        const response = await axios.get("/api/User/getUserById", {
          params: { id: this.userId },
        });

        if (response.data.code === "200" && response.data.data.picture) {
          const picture = response.data.data.picture;
          this.userAvatar = `/api/${picture.replace(/\\/g, "/")}`;
        } else {
          this.userAvatar = avatar;
        }
      } catch (error) {
        console.error("获取用户头像失败:", error);
        this.userAvatar = avatar;
      }
    },
    goToHome() {
      this.$router.push("/");
    },
    goToTeachingClassrooms() {
      this.$router.push("/TeachingClassrooms");
    },

    goToExamLibrary() {
      this.$router.push("/ExamLibrary");
    },
    goToQuestionBank() {
      this.$router.push("/QuestionBank");
    },
    handleCommand(command) {
      switch (command) {
        case "logout":
          this.isLoggedIn = false;
          this.userAvatar = avatar;
          localStorage.removeItem("token");
          localStorage.removeItem("id");
          this.$router.push("/");
          alert("已退出登录");
          break;
        case "goToaccount":
          this.$router.push("/account");
          break;
        case "goToPersonalCenter":
          this.$router.push("/PersonalCenter");
          break;
        case "resource":
          this.$router.push("/ResourceManager");
          break;
        case "classroom":
          this.$router.push("/CreateClassroom");
          break;

      }
    },
    handleLoginSuccess(userData) {
      this.isLoggedIn = true;
      this.userId = localStorage.getItem("id");
      this.fetchUserAvatar();
      this.showLoginModal = false;
    },
  },
  mounted() {
    const token = localStorage.getItem("token");
    const userId = localStorage.getItem("id");
    if (token && userId) {
      this.isLoggedIn = true;
      this.userId = userId;
      this.fetchUserAvatar();
    } else {
      this.isLoggedIn = false;
    }
  },
};
</script>

<style scoped>
/* 导航栏样式 */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #f5f5f5;
  border-bottom: 1px solid #ddd;
}

/* 左侧样式 */
.nav-left {
  display: flex;
  align-items: center;
  gap: 15px;
}

.nav-item {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  cursor: pointer;
}

.nav-item:hover {
  color: #409eff;
}

/* 右侧样式 */
.nav-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 搜索图标样式 */
.search-icon {
  font-size: 20px;
  cursor: pointer;
}

/* 头像样式 */
.avatar-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

/* 下拉菜单样式 */
.el-dropdown-menu {
  min-width: 150px;
}

.add-icon {
  font-size: 30px;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
</style>
